<template id="consumer_details">
	<div class="consumer_details">
		
		<!--头部-->
			<div class="about_header">

				<div class="about_title">
					<router-link :to="{path:'/main_money',query:{money:money}}"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

					<p>消费明细</p>
					<div class="about_select">
						<div class="about_ing"></div>

					</div>

				</div>
			</div>
			<!--头部结束-->
			
			<div class="consumer_most" style="padding-left: 17px;
    padding-right: 15px;">
					  <el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="消费明细" name="first">
						<ul>
							<li v-for = "(item,index) in myMoney" :key="index">
								<div class="consumer_fund">
									<div class="consumer_left">
										<p>{{item.user_name}}</p>
										<span>{{item.coach_name}}</span>
										<span>{{item.class_name}}</span>
										<span><font>订单号：</font>{{item.booking_id}}</span>
										<span>{{item.booking_date | formatDate}}</span>
									</div>
									<div class="consumer_right">
										<p>{{item.cash_price}}￥</p>
									</div>
									
								</div>
							</li>					
						</ul>
					</el-tab-pane>
					<el-tab-pane label="充值明细" name="second">
						<ul>
							<li v-for = "(item,index) in myMoneycz" :key="index">
								<p v-if="item.old_money < item.new_money">
									<span>充值明细：</span>{{item.chang_money}}
								</p>
								<p v-if="item.old_money > item.new_money"><span>支出明细：</span>{{item.chang_money}}</p>
							</li>					
						</ul>
					</el-tab-pane>
				</el-tabs> 
			</div>
				<div style="    text-align: center;
			padding-top: 100px;
			font-size: 13px;color:#8f8f94" v-if="seen1">暂无未消费明细</div>
			<div style="    text-align: center;
			padding-top: 100px;
			font-size: 13px;color:#8f8f94" v-if="seen2">暂无未充值明细</div>
	</div>
	
</template>

<script>
	export default {
		data() {
			return {
				seen1:false,
				seen2:false,
				activeName: 'first',
				active:'a',
				myMoney:'',
				sessionid: '',
				coachid: this.$route.query.coachid,
				userid: "",
				code: 1,
				username: "",
				money:'',
				myMoneycz:''
			}
		},
		 methods: {
			handleClick(tab, event) {
					setTimeout(()=>{
					if(tab.index == 0){
						console.log(this.myMoney)
						if(this.myMoney == ''){
							// alert(1)
							console.log(this.myMoney)
							this.seen1=true
							this.seen2=false
						}
					}else if(tab.index == 1){
						if(this.myMoney == ''){
							this.seen1=false
							this.seen2=true
						}
					}
				},10)
			}
			},
		created() {
				setTimeout(()=>{
						console.log(this.myMoney )
						if(this.myMoney == ''){
							this.seen1=true
							this.seen2=false
						}
				},10)
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				let _this = this
				var obj={
					userid:SESSION_ID.user.id
				}
				// console.log(obj)
				let qs = require('qs');
				this.$axios.post("/yujiaextend/user/showUserWalletDetailed", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
				response.data.data[0].sort(function(a, b){
					return b.ctime - a.ctime
				});					
				_this.myMoneycz=response.data.data[0]
				
				if(response.data.data[0] == ''){
					// _this.seen1=true
				}



				response.data.data[1].sort(function(a, b){
					return b.create_time - a.create_time
				});
				_this.myMoney=response.data.data[1]	
				
				
				}).catch(function(error) {
					console.log(error);
				})			
		},
		filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      },
    },
		
	}
</script>

<style scoped>
	@import "../../assets/css/consumer_details.css";
	.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 100px;
}
</style>